<template>
    <div class="category">
        <Nav></Nav>
        <Nav2 @get_category_id="get_cate_id"></Nav2>
        <div class="top-h1">
            <img :src="category_obj.cover" alt="" class="cover">
            <h1>{{category_obj.name}}</h1>
        </div>
        <div class="container">
            <div class="row">
                <div class="product" v-for="product in product_list" :key="product.name">
                    <img :src="product.cover" alt="" class="image">
                    <h4 class=desc>{{ product.title}}</h4>
                    <h5 class=desc style="color: #79747d">{{ product.desc}}</h5>
                    <span class="money">¥{{product.price*1}} /人</span>
                    <hr>
                </div>
            </div>
        </div>

        <Chat></Chat>
    <Foot></Foot>
    </div>
</template>

<script>
     import Nav from '../components/Nav'
    import Nav2 from '../components/Nav2'
    import Chat from '../components/Chat'
    import Foot from '../components/Foot'
    export default {
        name: "Category",
        data(){
            return{
                category_obj :'',
                product_list:'',
            }
        },
        components:{
            Nav, Nav2, Chat, Foot
        },
        methods:{
            get_cate_id(){
                this.category_id = this.$route.params.pk;
                this.$axios({
                    url: this.$settings.base_url + '/product/product?product_category='+this.category_id
                }).then(response => {
                    this.product_list = response.data;
                    console.log(response.data)
                });
                this.$axios({
                    url: this.$settings.base_url + '/home/nav_category?id='+this.category_id
                }).then(response => {
                    this.category_obj = response.data[0];
                    console.log(response.data)
                });
            }
        },
        created(){
            this.get_cate_id()
        }
    }
</script>

<style scoped>
    .top-h1 {
        position: relative;
        z-index: 1;

    }

    .cover {
        height: 360px;
        width: 100%;

        z-index: 1;
    }

    .category {
        display: block;

    }

    h1 {
        display: inline-block;
        text-align: center;
        position: absolute;
        z-index: 2;
        top: 40%;
        left: 48%;
        color: white;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

    }

        .product {
        width: 335px;
        height: 315px;
        background: white;
        display: inline-block;
        margin-left: 50px;
        margin-top: 60px;
    }

    .desc {
        display: block;
        text-align: center;
        cursor: pointer;
    }

    .image {
        width: 335px;
        height: 220px;
        display: block;
        border-radius: 8px;
        cursor: pointer;
    }

    .money {
        color: #ff2b8a;
        display: block;
        text-align: center;
        margin-bottom: 10px;
        cursor: pointer;

    }

</style>